<template>
  <div class="app-container">
    <el-card class="pag-container" style="padding-bottom: 80px;">
      <el-row>
        <el-col :span="8">
          <span style="font-size: 16px;font-weight: 600;display: block;padding-bottom: 10px;">{{ rowData.companyName }}</span>
          <div style="width: 100%;position:relative;margin-bottom: 20px;">
            <Carousel v-bind="swiperData" style="position: absolute;"></Carousel>
          </div>
        </el-col>
        <el-col :span="10">
          <div style="font-size: 14px;text-align: left; box-sizing: border-box;padding: 10px 40px 10px 40px;">
            <el-row :gutter="10">
              <el-col :span="11">
                <span style="font-weight: bolder;font-size: 16px;">{{ rowData.carryCityName }}</span>
                <div style="margin-top: 20px;">
                  提箱城市：{{ rowData.carryCityName }}/{{ rowData.carryCountryName }}
                </div>
              </el-col>
              <el-col :span="2"><img style="text-align: center; width: 17px;"
                  src="@/assets/icons/svg/right.svg"></el-col>
              <el-col :span="11" style="text-align: right;">
                <span style="font-weight: 800;font-size: 16px;">{{ rowData.returnCityName }}</span>
                <div style="margin-top: 20px;">
                  还箱城市：{{ rowData.returnCityName }}/{{ rowData.returnCountryName }}
                </div>
              </el-col>
            </el-row>
            <el-row class="marginTop50">
              <el-col :span="5">租赁单价</el-col>
              <el-col :span="12" class="fontWeight">{{currency}} {{ unitPrice }}</el-col>
            </el-row>
            <el-row class="marginTop10">
              <el-col :span="5">箱使期</el-col>
              <el-col :span="12" class="fontWeight">{{ rowData.boxUsagePeriod }} 天</el-col>
            </el-row>
            <el-row class="marginTop10">
              <el-col :span="5">箱型</el-col>
              <el-col :span="12">
                <el-radio-group v-model="param.boxType" @change="param.inventory = inventory">
                  <el-radio-button v-for="item in param.boxTypeList" :label="item.label" :key="item"
                    :value="item.value" />
                </el-radio-group>  
              </el-col>
            </el-row>
            <el-row class="marginTop10">
              <el-col :span="5">箱况</el-col>
              <el-col :span="12">
                <el-radio-group v-model="param.boxCondition" @change="param.inventory = inventory">
                  <el-radio-button v-for="item in param.boxConditionList" :label="item.label" :key="item"
                    :value="item.value" />
                </el-radio-group></el-col>
            </el-row>
            <!-- <el-row class="marginTop10">
              <el-col :span="5">求租箱量</el-col>
              <el-col :span="12" class="fontWeight">{{ inventory }}</el-col>
            </el-row> -->
            <el-row class="marginTop10">
              <el-col :span="5">预计提箱日期</el-col>
              <el-col :span="12">{{ formatDate(rowData.planPickupDate ,2)}}</el-col>
            </el-row>
            <el-row class="marginTop50" v-if="route.query.type != 'chakan' ">
              <el-col :offset="5" :span="14">
                  <el-button type="primary" @click="handleSubmit">立即租箱</el-button>
              </el-col>
            </el-row>
          </div>

        </el-col>
      </el-row>
    </el-card>

    <el-card class="pag-container">
      <span style="font-weight: 700;font-size: 15px;">
        <span style="width:3px;height:20px;background-color: #2158F3;"> &nbsp</span>租箱详情
      </span>
      <el-form inline label-width="60px" style="margin-top: 10px;" label-position="left">
        <el-form-item label="箱型：">{{ boxTypeFilter(param.boxType) }}(HQ为高柜，GP为普柜)</el-form-item>
        <el-form-item label="箱况:">{{ boxConditionFilter(param.boxCondition) }}</el-form-item>
        <el-form-item label="箱使期:">{{ rowData.boxUsagePeriod }} 天</el-form-item>
        <el-form-item label="总重:">{{ param.boxType > 10 ? '30480' : '30480/32500' }} KG</el-form-item>
      </el-form>

      <span style="font-weight: 700;font-size: 15px;">租赁介绍</span>
      <div v-for="item in detailFileList" style="width:100%;  ">
        <div v-for="img in item.imgInfo" style="width:100%;max-height:300px;overflow: hidden;">
          <img :src="img.url" style="width:100%;height:auto;margin-top: 10px" />
        </div>
        <div style="box-sizing: border-box;padding: 10px;">{{ item.textVal }}</div>
      </div>

    </el-card>

    <!-- <el-card class="pag-container">
      <span style="font-weight: 700;font-size: 15px;">
        <span style="width:3px;height:20px;background-color: #2158F3;"> &nbsp</span>租赁介绍
      </span>
      <div v-for="item in detailFileList" style="width:100%;  ">
        <div v-for="img in item.imgInfo" style="width:100%;max-height:300px;overflow: hidden;">
          <img :src="img.url" style="width:100%;height:auto;margin-top: 10px" />
        </div>
        <div style="box-sizing: border-box;padding: 10px;">{{ item.textVal }}</div>
      </div>
    </el-card> -->

  </div>
</template>
<script lang="ts" setup>
import {formatDate} from '@/utils/index'
import  Carousel from '@/components/carousel'
import { computed, onActivated, onMounted, reactive, ref } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import { getBoxInfo } from '@/api/boxRent/indexNew'
import orderInfo from '@/store/modules/order'
const router = useRouter()
const route = useRoute()

const swiperData = reactive({
  list: [],
  config: {
    width:"100%",
    height:"450px"
  }
})

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const param = reactive({
  boxConditionList: [],
  boxTypeList: [],
  boxType: '',
  boxCondition: '',
  num: 0,
  page: 1,
  limit: 10
})

const inventory = computed(() => {
  let tagDataList = rowData.value.releaseRentPriceList
  let num = 0
  if (!tagDataList) return 0
  tagDataList.forEach((item: any) => {
    if (item.boxType == param.boxType && item.boxCondition == param.boxCondition) {
      num = item.inventory
    }
  })

  // return num - param.num
  return num
})
//计算租箱单价
const unitPrice = computed(() => {
  const tagDataList = rowData.value.releaseRentPriceList
  let price = 0
  if (!tagDataList) return 0
  tagDataList.forEach((item: any) => {
    if (item.boxType == param.boxType && item.boxCondition == param.boxCondition) {
      price = item.unitPrice
    }
  })
  return price.toLocaleString()
})
//计算租箱币种
const currency = computed(() => {
  const tagDataList = rowData.value.releaseRentPriceList
  let currency = ""
  if (!tagDataList) return 0
  tagDataList.forEach((item: any) => {
    if (item.boxType == param.boxType && item.boxCondition == param.boxCondition) {
      currency = item.currency == "USD" ? "$":"￥"
    }
  })
  return currency
})


// onMounted(() => {
//   console.log('onMounted')
//   getSetBoxInfo()
// })

onActivated(() => {
  console.log('onActivated')
  getSetBoxInfo()
})

// 获取数据
const mainFileList = ref([])
const detailFileList = ref([])
const rowData = ref([])
const getSetBoxInfo = async () => {
  console.log("getSetBoxInfo")
  const row = orderInfo().rowData
  if (row) {
    await getBoxInfo(row.releaseRentId).then((res: any) => {
      const result = res.data
      mainFileList.value = JSON.parse(result.mainFileList)
      detailFileList.value = JSON.parse(result.detailFileList)
      swiperData.list= JSON.parse(result.mainFileList)
      setBoxType(result) // 箱型list
      setboxCondition(result) // 箱况list
      rowData.value = result
      //设置默认值
      param.boxType = result.releaseRentPriceList[0].boxType
      param.boxCondition = result.releaseRentPriceList[0].boxCondition
    })
  }
}

// 
const setBoxType = (result: any) => {
  let arry = []
  param.boxTypeList = []
  result.releaseRentPriceList.forEach((el: any) => {
    if (!arry.includes(el.boxType)) {
      param.boxTypeList.push({ value: el.boxType, label: boxTypeFilter(el.boxType) })
      arry.push(el.boxType)
    }
  })
}
const setboxCondition = (result: any) => {
  let arry = []
  param.boxConditionList = []
  result.releaseRentPriceList.forEach((el: any) => {
    if (!arry.includes(el.boxCondition)) {
      param.boxConditionList.push({ value: el.boxCondition, label: boxConditionFilter(el.boxCondition) })
      arry.push(el.boxCondition)
    }
  })
}

//
const handleChange = (value: Number) => {
  console.log(value)
  if (!inventory) {
  }
}

// 提交
const handleSubmit = () => {
  console.log('handleSubmit')
  let submitData = {
    boxType: param.boxType,
    boxCondition: param.boxCondition,
    num: param.num,
    unitPrice: unitPrice.value,
    inventory: inventory.value
  }
  const data = {
    submitData: submitData,
    row: rowData.value
  }
  orderInfo().setRowData(data)
  router.push('seekRent')
}


//过滤
const boxConditionFilter = (val: any) => {
  let result = ''
  const boxConditionList = [{ value: 15, label: '适货' }, { value: 10, label: '次新' }, { value: 20, label: '混提' },{ value: 5, label: '全新' }]
  boxConditionList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
const boxTypeFilter = (val: any) => {
  let result = ''
  const boxTypeList = [{ value: 5, label: '40HQ' }, { value: 10, label: '40GP' }, { value: 15, label: '20HQ' }, { value: 20, label: '20GP' }]
  boxTypeList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}

</script>
<style lang="scss" scoped>
.pag-container {
  margin-top: 20px;
  box-sizing: border-box;
  padding: 10px;
}
</style>